import react, { useEffect } from 'react'
import { useState, useRef } from 'react';
import './index.scss'
import avatar from './images/bozai.png';
import _ from 'lodash';
import classNames from 'classnames';
import { v4 as uuidV4} from 'uuid';
import dayjs from 'dayjs';
import  axios from 'axios';



// 封装请求数据的hook
function useGetList() {
  const [commList, setcommList] = useState([])
  useEffect(() => {
    // 请求数据
   async function getList () {
      // axios请求数据
      const res  = await axios.get('http://localhost:3004/list')
      setcommList(res.data)
    }
    getList()
  },[])
  return {
    commList, setcommList
  }
}

// 封装Item组件
function Item({item,onDel,user}) {
  return (
        <div className="reply-item">
        {/* 头像 */}
        <div className="root-reply-avatar">
          <div className="bili-avatar">
            <img
              className="bili-avatar-img"
              src={item.avatar}
              alt=""
            />
          </div>
        </div>

        <div className="content-wrap">
          {/* 用户名 */}
          <div className="user-info">
            <div className="user-name">{item.uname}</div>
          </div>
          {/* 评论内容 */}
          <div className="root-reply">
            <span className="reply-content">{item.content}</span>
            <div className="reply-info">
              {/* 评论时间 */}
              <span className="reply-time">{item.ctime}</span>
              {/* 喜欢 */}
              <span className="reply-like">
                {/* 选中类名： liked */}
                <i className="icon like-icon" />
                <span>{item.like}</span>
              </span>
              {/* 不喜欢 */}
              <span className="reply-dislike">
                {/* 选中类名： disliked */}
                <i className="icon dislike-icon" />
              </span>
              {/* 条件 user.uid === item.user.uid 才显示删除 */}
              {user.uid === item.user.uid && 
                // eslint-disable-next-line no-undef
                <span className="delete-btn" onClick={() => onDel(item.rpid)}>删除</span>
              }
            
            </div>
          </div>
        </div>
        </div>
  )
}

function App() {
  // B站评论案例
/**
 * 评论列表的渲染和操作
 *
 * 1. 根据状态渲染评论列表
 * 2. 删除评论
 * 3. 喜欢和不喜欢
 */

// 评论列表数据
const List = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: '13258165',
      avatar:
        'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/zhoujielun.jpeg',
      uname: '周杰伦',
    },
    // 评论内容
    content: '哎哟，不错哦',
    // 评论时间
    ctime: '10-18 08:15',
    // 喜欢数量
    like: 98,
    // 0：未表态 1: 喜欢 2: 不喜欢
    action: 0,
  },
  {
    rpid: 2,
    user: {
      uid: '36080105',
      avatar:
        'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/xusong.jpeg',
      uname: '许嵩',
    },
    content: '我寻你千百度 日出到迟暮',
    ctime: '11-13 11:29',
    like: 88,
    action: 2,
  },
  {
    rpid: 121,
    user: {
      uid: '30009257',
      avatar,
      uname: '黑马前端',
    },
    content: '学前端就来黑马',
    ctime: '10-19 09:00',
    like: 66,
    action: 1,
  },
]
const { commList, setcommList} = useGetList()
// const [commList, setcommList] = useState(_.orderBy(List,'like','desc'))

// 删除评论
const  handleDel =(id) => {
  // console.log(id)
  // filter返回一个新数组 不更改老数组
  setcommList(commList.filter(item =>item.rpid !==id))
}
// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  avatar,
  // 用户昵称
  uname: '黑马前端',
}

/**
 * 导航 Tab 的渲染和操作
 *
 * 1. 渲染导航 Tab 和高亮
 * 2. 评论列表排序
 *  最热 => 喜欢数量降序
 *  最新 => 创建时间降序
 */

// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
]
// Tab 切换
// 1.点击谁就把谁的type 记录下来
// 2.通过记录的type和每一项遍历时的type做匹配，控制激活类名的显示
const [type,setType] = useState('hot')
const handleTabChange = (type) => {
  // console.log(type)
  setType(type)
  if(type === 'hot') {
    // 根据点赞数量排序
    // lodash
    setcommList(_.orderBy(commList,'like','desc'))
  } else {
  // 根据创建时间排序
  setcommList(_.orderBy(commList,'ctime','desc'))
  }
}

// 发表评论const
const inputRef = useRef(null)
 const [context,setContext] = useState("")
 const handlePublish =() => {
  setcommList([
    ...commList,{
      rpid: uuidV4(), // 生成随机id
      user: {
        uid: '30009257',
        avatar,
        uname: '前端已死',
      },
      content: context,
      ctime: dayjs(new Date()).format('MM-DD hh:mm'), // 格式时间包 dayjs
      like: 66,
      action: 1,
    }
  ])
  // 添加完毕之后  清空input框
  setContext("")
// 从新聚焦
  inputRef.current.focus()

 }

  return (
    <div className="App">
   <div className="app">
  {/* 导航 Tab */}
  <div className="reply-navigation">
    <ul className="nav-bar">
      <li className="nav-title">
        <span className="nav-title-text">评论</span>
        {/* 评论数量 */}
        <span className="total-reply">9</span>
      </li>
      <li className="nav-sort">
        {/* 高亮类名： active */}
        {tabs.map((item)=> (
          // 点击谁就把谁的type（独一无二的标识）记录下来，然后遍历时的每一项的type做匹配，谁匹配到谁就负责类名的高亮className={`nav-item ${type === item.type && 'active'}`}
            <div key={item.type} className={classNames('nav-item',{active:type === item.type})} onClick={() =>handleTabChange(item.type)}>{item.text}</div>
        ))}
      
        {/* <div className="nav-item">最新</div> */}
      </li>
    </ul>
  </div>

  <div className="reply-wrap">
    {/* 发表评论 */}
    <div className="box-normal">
      {/* 当前用户头像 */}
      <div className="reply-box-avatar">
        <div className="bili-avatar">
          <img className="bili-avatar-img" src={avatar} alt="用户头像" />
        </div>
      </div>
      <div className="reply-box-wrap">
        {/* 评论框 */}
        <textarea
          className="reply-box-textarea"
          placeholder="发一条友善的评论"
          ref={inputRef}
          value={context}
          onChange={(e) => setContext(e.target.value) }
        />
        {/* 发布按钮 */}
        <div className="reply-box-send">
          <div className="send-text" onClick={handlePublish}>发布</div>
        </div>
      </div>
    </div>

    {/* 评论列表 */}
    <div className="reply-list">
      {/* 评论项 */}
      {commList.map(item => ( 
        <Item key={item.id} item={item} onDel={handleDel} user={user}></Item>
      ))}
     
    </div>

    <div className="reply-none">暂无评论</div>
  </div>
</div>
    </div>
  );
}

export default App;
